<template>
  <el-container>
    <el-aside style="width:250px;">
      <el-menu default-active="1" class="el-menu-vertical-demo"
               background-color="aliceblue" text-color="#FFC0CB">
        <el-menu-item index="1">
          <i class="el-icon-s-promotion"></i>
          <span slot="title">首页</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-video-camera"></i>
          <span slot="title">vlog</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-headset"></i>
          <span slot="title">音乐</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-cpu"></i>
          <span slot="title">科技</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-food"></i>
          <span slot="title">美食</span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-wind-power"></i>
          <span slot="title">动漫</span>
        </el-menu-item>
        <el-menu-item index="7">
          <i class="el-icon-coordinate"></i>
          <span slot="title">游戏</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div>
          <h1>巴拉巴拉</h1>
        </div>
        <div>
          <!-- 条件查询输入框 -->
          <el-input prefix-icon="el-icon-search" style="height:30px;width:300px;"></el-input>
          <el-button>搜索</el-button>
        </div>
        <div v-if="userInfo.uid === -1">
          <div style="float: right;">
            <el-button type="primary" round>
              <router-link to="/register">注册</router-link>
            </el-button>
          </div>
          <div style="float: right;">
            <el-button type="primary" round>
              <router-link to="/login">登陆</router-link>
            </el-button>
          </div>
        </div>
        <div v-else>
          <div style="float: right;">
            <el-button v-on:click="loginOut">登出</el-button>
          </div>
          <div style="float: right;" v-on:click="toUserPage">
              <el-avatar icon="el-icon-user-solid">{{userInfo.userName}}</el-avatar>
          </div>
        </div>
      </el-header>
      <el-main>
        <div>
          <template>
            <el-row :gutter="20">
              <el-col :span="6" v-for="(videoInfo) in videoInfos" :key="videoInfo">
                <div class="grid-content bg-purple" v-on:click="playVideo(videoInfo)">
                  <p>{{videoInfo.title}}</p>
                  <video class="main_player" :poster="videoInfo.frameUrl" preload="none">
                    <source type="video/mp4" :src="videoInfo.videoUrl">
                  </video>
                </div>
              </el-col>
            </el-row>
          </template>
        </div>
        <router-view></router-view>
      </el-main>
      <el-footer>
        <div>
          <h4>©西北农林科技大学巴拉巴拉开发小组版权所有</h4>
        </div>
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
import '../assets/css/main.css'
import Vue from "vue";
import axios from "axios";
import common from "./common";
import "jquery"

Vue.config.$axios = axios

export default {
  data() {
    return {
      playerOptions: [common.defaultPlayerOption],
      videoInfos: [],
      userInfo: JSON.parse(sessionStorage.getItem("userInfo"))
    }
  },
  methods: {
    //登出
    loginOut: function (event) {
      sessionStorage.setItem("userInfo", JSON.stringify(common.defaultUserInfo))
      this.userInfo = common.defaultUserInfo
    },
    //获取热视频，用于首页展示
    getHotVideos: function () {
      axios.get('video/hot_videos', {
        params: {"num": 20}
      }).then(res => {
        if (res.data.code === 0) {
          //获得视频信息
          this.videoInfos = res.data.data
          for (let i = 0; i < this.videoInfos.length; i++) {
            this.videoInfos[i].videoUrl = ""
          }
          //生成可播放的url
          for (let i = 0; i < this.videoInfos.length; i++) {
            axios.get('video/get_url', {
              params: {"videoId": this.videoInfos[i].videoId}
            }).then(res => {
              if (res.data.code === 0) {
                this.videoInfos[i].videoUrl = res.data.data[0]
              }
            })
            axios.get('video/get_frame_url', {
              params: {"videoId": this.videoInfos[i].videoId}
            }).then(res=>{
              if (res.data.code === 0) {
                this.videoInfos[i].frameUrl = res.data.data[0]
              }
            })
          }
        } else alert(res.data.errorMessage)
      }).catch(res => {
        alert("服务错误，请稍后重试")
      })
    },
    //跳转到播放页
    playVideo: function (videoInfo) {
      this.$router.push({
        path: "/show",
        name: "show",
        params: {
          "videoInfo": videoInfo
        }
      })
    },
    //跳转到个人主页
    toUserPage: function () {
      this.$router.push({
        path: "/user",
        name: "user"
      })
    }
  },
  created() {
    this.getHotVideos()
  },
  mounted() {
    window.vue = this
  }
}
</script>

<style>
.main_player {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
